<template>
    <view>
        <view class="title">{{ title }}</view>
        <view class="info">
            <view>发布时间：{{ time }}</view>
            <view><u-button size="mini" open-type="share" :custom-style="customStyle">转发分享</u-button></view>
        </view>
        <view class="content"><u-parse :show-with-animation="true" :html="content" :lazy-load="true" :loading-img="loadingimg"></u-parse></view>
        <u-divider margin-top="20" margin-bottom="20">今天就到这把~</u-divider>
        <customTab :tab="tab"></customTab>
    </view>
</template>

<script>
import customTab from '../../component/customTab/customTab';
export default {
    components: { customTab },
    data() {
        return {
            title: '',
            content: ``,
            time: '',
            loadingimg: '/static/images/noImage.jpg',
            tab: {
                iconPath: '/static/tabbar/article.png',
                selectedIconPath: '/static/tabbar/article.png',
                text: '动态',
                pagePath: '/pages/article/article',
                customIcon: false
            },
            customStyle: {
                borderColor: '#ffffff',
                color: '#82848a'
            }
        };
    },
    methods: {
        phone() {
            uni.makePhoneCall({
                phoneNumber: '18381532620' //仅为示例
            });
        },
        toHome() {
            this.$u.route({
                type: 'tab',
                url: '/pages/home/home'
            });
        },
        async getDetail(id) {
            let res = await this.$u.api.getArticleDetail({ id: id });
            uni.setNavigationBarTitle({
                title: res.article_name
            });

            this.content = res.article_detail;
            this.title = res.article_name;
            this.time = res.create_time;
        }
    },
    onLoad(options) {
        if (options.id) {
            this.getDetail(options.id);
        }
    }
};
</script>
<style scoped lang="scss">
.title {
    color: rgb(83, 83, 83);
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    padding: 20rpx;
    margin-bottom: 20rpx;
}
.info {
    color: $u-type-info-disabled;
    font-size: 24rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20rpx;
}
.content {
    border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
    padding-top: 30rpx;
    padding-left: 15rpx;
    padding-rigth: 15rpx;
    max-width: 100%;
    word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据 */
    white-space: pre-wrap; /* 只对中文起作用，强制换行 */
}
</style>
